<template>
	<view class="dialog-video">
		<video class="video-box" v-if="show" :src="videoData" id="videoEle" controls autoplay :style="{'height': clientHeight - 53 + 'px'}"></video>
		<u-button v-if="show" :hair-line="false" @click="saveVideo" :customStyle="{'width': '100vw','height': '53px','line-height': '53px','background-color':'#f1f1f1',
		'text-align': 'center','font-size':'34rpx','color': '#494a4a'}">{{ $t('chat.chat_save_album') }}</u-button>
	<!-- 	<button class="save-btn" v-if="show" @click="saveVideo">{{ $t('chat.chat_save_album') }}</button> -->
	</view>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	import { useI18n } from 'vue-i18n'
export default defineComponent({
	name: "videoPlay",
  setup(props:any) {
    const data = reactive({
			videoData: '',
      show: false,
			videoContext: null,
			direction: 0,
			clientHeight: 0,
    });
		const { t } = useI18n()
		onLoad((option) => {
			data.videoData = option && option.videoMessage
			data.show = true
			uni.getSystemInfo({
				success: res=> {
					data.clientHeight = res.windowHeight
				}
			})
		})
	
		onReady(() => {
			data.videoContext = uni.createVideoContext('videoEle');
		 })
		const toggleClose = () => {
			data.show = false
			uni.navigateBack({
				delta: 1
			});
		}
		const saveVideo = () => {
			uni.downloadFile({
				url: data.videoData, //仅为示例，并非真实的资源
				success: (res) => {
					if (res.statusCode === 200) {
						console.log('下载成功',res);
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title: t('mine.save_success'),
								})
							}
						});
					}
				}
			});
		  
		};
    return {
      ...toRefs(data),
			toggleClose,
			saveVideo
    };
  }
});
</script>
<style lang="scss" scoped>
.dialog-video {
 position: fixed;
 z-index: 999;
 width: 100vw;
 background: #f1f1f1;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
  .save-btn {
		width:  100vw;
		height: 53px;
		line-height: 53px;
		background-color: #f1f1f1;
		text-align: center;
		font-size: 34rpx;
		color: #494a4a;
	}
	
	.video-box {
		width: 100vw;
	}
	.video-close {
		z-index: 999;
		width: 90%;
		color: antiquewhite;
		position: absolute;
		display: flex;
		justify-content:space-between;
		bottom: 50px;
		left: 10px;
		right: 0;
		margin: 0 auto;
	.video-icon	{
		display: block;
		width: 30px;
		height: 30px;
	  }
	}
}
.content {
		&-in {
			border-radius: 6px;
		}
		&-out {
			border-radius: 6px;
		}
 }
</style>
